<template>
    <van-sticky>
        <van-nav-bar title="评论" left-text="返回" left-arrow @click-left="onBack">
        </van-nav-bar>
    </van-sticky>

    <div v-for="item in proComment" :key="item.id">
        <img :src="item.thumb_cdn" style="width: 100%;">
        <p style="text-align: center;font-size: 20px;margin: 10px 0;">{{ item.name }}</p>
        <textarea id="names" rows="6" placeholder="请输入内容" v-model="content"
            :disabled="item.comment ? '' : disabled"></textarea>
    </div>

    <div v-for="item in proComment" :key="item.id">
        <button id="btn" @click="comment" v-if="!item.comment">提 交</button>
        <button id="btn" v-else style="background-color: #f0ad4e;">已评论</button>
    </div>

</template>


<script setup>
import { onBeforeMount } from "vue";
const { proxy } = getCurrentInstance();
const content = ref("");
const proid = ref(proxy.$route.query.proid ?? 0);
const orderid = ref(proxy.$route.query.orderid ?? 0);
const busid = proxy.$cookies.get('business').id;
const attrs = proxy.$cookies.get('attrs');
const proComment = ref([]);

onBeforeMount(() => {
    product();
})
const product = async () => {
    let params = {
        proid: proid.value,
        busid: busid,
        orderid: orderid.value,
        attrs: JSON.stringify(attrs)
    };

    let result = await proxy.$post({
        url: '/product/comment/index',
        params
    })

    if (result.code === 1) {
        proComment.value = result.data.list;
        content.value = proComment.value[0].comment;
    } else {
        proxy.$showToast(result.msg);
    }
}

const comment = async () => {
    if (!content.value) {
        proxy.$showToast("评论不能为空");
        return false;
    }
    let params = {
        proid: proid.value,
        busid: busid,
        orderid: orderid.value,
        content: content.value,
        attrs: JSON.stringify(attrs)
    }

    let result = await proxy.$post({
        url: '/product/comment/comment',
        params
    })

    console.log(result);
    if (result.code === 1) {
        product();
    } else {
        proxy.$showToast(result.msg);
    }
}



const onBack = () => {
    proxy.$cookies.remove('attrs');
    proxy.$router.back();
}
</script>

<style scoped>
#names {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
    padding: 5px;
    font-size: 16px;
    background-color: rgb(236, 236, 236);
    text-align: center;
}

#btn {
    display: block;
    width: 200px;
    height: 35px;
    font-size: 16px;
    background-color: cornflowerblue;
    border: none;
    color: aliceblue;
    margin: 10px auto;
}
</style>